<template>
    <el-dialog @close="close" v-model="dialogFormVisible" :title="title">
        <el-form-item>
            <slot name="upload"></slot>
        </el-form-item>
        <el-form :model="dialogFormData" ref="dialogForm">
            <el-form-item v-for="(item, index) in dialogFormData" :key="index" :label="item.label"
                :prop="index + '.value'" :label-width="formLabelWidth"
                :rules="{ required: true, trigger: 'blur', message: item.label + '不能为空' }">
                <el-input v-model="item.value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm(dialogForm)" type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, watchEffect, toRefs } from "vue"
//想法：
//1.根据传入的数据，自动创建出from表单元素，现在默认使用input
//2.表单需要具备能够检验属性的功能
//3.表单通过和不通过，可以回调对应的方法
//4.控制显示和隐藏的属性
//5.控制labelWidth的属性




//dialog使用说明
//属性:
//1.visivle:Boolean
//2.dialogFormData:Object 表单的数据 {name:{label:"item的描述"，value:"对应的值"}}
//3.formLabelWidth:String label的宽度
//4.title:String dialog的标题


//事件
//validataSuccess 点击确定按钮，表单校验之后触发，回传一个form实例引用
//dialogCancel 点击取消按钮 触发的事件
//closed dialog被关闭的时候触发的事件









//声明props
let props = defineProps({
    //dialog标题
    title: {
        type: String,
        default() {
            return '增加学员信息'
        }
    },
    //控制表单显示隐藏的
    visible: {
        type: Boolean,
        default() {
            return false
        }
    },
    //控制表单的校验
    rules: {
        type: Array,
        default() {
            return []
        }
    },
    //弹窗表单中的数据来源
    dialogFormData: {
        type: Object,
        default() {
            return []
        }
    },
    formLabelWidth: {
        type: String,
        default() {
            return "140px"
        }
    }
})

//声明表单校验通过之后的回调
let emits = defineEmits(['validateSuccess', 'dialogCancel', 'closed'])




//dialogFormVisible的初始值，定义为传递下来的初始值
let dialogFormVisible = ref(false)


//使用watchEffect侦听visible props的变化
let { visible } = toRefs(props)
//实时侦听visible props的变化，控制dialog显示或者隐藏
watchEffect(() => {
    dialogFormVisible.value = visible.value
})

//声明取消和确定的方法
//点击取消
let cancel = () => {
    emits('dialogCancel')
}
//点击确定
//声明一个ref引用dialog的结构
let dialogForm = ref()
let confirm = (form) => {
    console.log(dialogForm, '数据');
    console.log(form);
    form.validate(valid => {
        if (valid) {
            //表单校验通过
            emits('validateSuccess', dialogForm)
        } else {
            //表单校验不通过
        }
    })
}

//dialog被关闭的时候触发的事件
let close = () => {
    emits('closed', dialogFormVisible)
}

</script>